import styles from "./DataFetchingComponent.module.css";
import { useState, useEffect } from "react";
type User = {
  id: string;
  firstName: string;
  lastName: string;
};

const DataFetchingComponent = () => {
  const [data, setData] = useState<User | null>(null);
  const handleClickGetPosts = () => {
    fetch("/posts")
      .then((response) => {
        // console.log(response);
        // console.log(response.json());
        return response.json();
      })
      .then((data) => {
        console.log(data);
      })
      .catch((error) => console.error("Error:", error));
  };

  // https://github.com/mswjs/data?tab=readme-ov-file#generate-rest-api
  const handleClickGetPostById = () => {
    fetch("/posts/post-0")
      .then((response) => {
        // console.log(response);
        // console.log(response.json());
        return response.json();
      })
      .then((data) => {
        console.log(data);
      })
      .catch((error) => console.error("Error:", error));
  };

  const handleClickPostCreate = () => {
    // Create a new user in the database.
    fetch("/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        id: "abc-123",
        name: "John",
      }),
    });
  };
  const handleClickDeletePostById = () => {
    fetch("/posts/post-2", {
      method: "DELETE",
    });
  };
  const handleClickPutPostById = () => {
    fetch("/posts/abc-123", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        id: "abc-123",
        name: "John-new",
      }),
    });
  };

  const handleClickDelayPutPostById = () => {
    fetch("/posts/delay/post-1", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        id: "abc-123",
        name: "post-1-delay-new",
      }),
    });
  };

    const handleClickDelayGetAllPosts = () => {
    fetch("/posts/delay")
      .then((response) => {
        // console.log(response);
        // console.log(response.json());
        return response.json();
      })
      .then((data) => {
        console.log(data);
      })
      .catch((error) => console.error("Error:", error));
  };



  useEffect(() => {
    fetch("https://api.example.com/user")
      .then((response) => {
        // console.log(response);
        return response.json();
      })
      .then((data) => setData(data))
      .catch((error) => console.error("Error:", error));
  }, []);

  return (
    <div>
      <h2> 使用fetch调试后端接口</h2>
      {/* {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>} */}
      {data ? (
        <div>{`${data.id} ${data.firstName} ${data.lastName}`}</div>
      ) : (
        <div>Loading...</div>
      )}
      <div className={styles.container}>
        {" "}
        <button onClick={handleClickGetPosts}>GET /posts</button>{" "}
      </div>
      <div className={styles.container}>
        {" "}
        <button onClick={handleClickGetPostById}>GET /posts/:id</button>{" "}
      </div>
      <div className={styles.container}>
        {" "}
        <button onClick={handleClickPostCreate}>
          POST /posts will creates a new post
        </button>{" "}
      </div>
      <div className={styles.container}>
        {" "}
        <button onClick={handleClickPutPostById}>PUT /posts/:id</button>{" "}
      </div>
      <div className={styles.container}>
        {" "}
        <button onClick={handleClickDeletePostById}>
          DELETE /posts/:id
        </button>{" "}
      </div>

      <div className={styles.container}>
        {" "}
        <button onClick={handleClickDelayPutPostById}>
          {" "}
          put /posts/delay/:postId
        </button>{" "}
      </div>

       <div className={styles.container}>
        {" "}
        <button onClick={handleClickDelayGetAllPosts}>
          {" "}
          get /posts/delay
        </button>{" "}
      </div>
    </div>
  );
};

export default DataFetchingComponent;
